<script setup lang="ts">
import { defineAsyncComponent } from "vue";

const MContainer = defineAsyncComponent(
  () => import("@/components/mContainer/index.vue")
);
const mHeader = defineAsyncComponent(
  () => import("./Header/index.vue")
)
const mContent = defineAsyncComponent(
  () => import("./content/index.vue")
);
</script>
<template>
  <div id="mApp" class="visualMainBody">
    <MContainer class="visualMain" :optionsWidth="1920" :optionsHeight="1120">
      <mHeader />
      <mContent />
    </MContainer>
  </div>
</template>
<style scoped lang="less">
#mApp {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #eaf6ff;
    background: url("./assets/bg.png") no-repeat center center;
    background-color: #0a141f;
    background-size: 100%;
  }
  .visualMainBody {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .visualMain {
    transform-origin: center center;
    position: fixed;
    transform: 0.2s;
  }
</style>
